<template>
    <h3>系统设置（版心）</h3>
    <div style="margin-top: 15px;">
        <el-button @click="changeAppWidthFn('100%')" type="primary">宽度100%</el-button>
        <el-button @click="changeAppWidthFn('1600px')" type="success">大</el-button>
        <el-button @click="changeAppWidthFn('1400px')" type="danger">中</el-button>
        <el-button @click="changeAppWidthFn('1200px')" type="warning">小</el-button>
    </div>
</template>
<script lang="ts" setup>
// import { ref } from 'vue'
// 导入storeToRefs函数
import {storeToRefs} from 'pinia'
import { useRouter, useRoute } from 'vue-router'

// 导入 “myapp” 数据存储模块
import { useAppStore } from '../stores/myapp'
// 获取“app”存储对象
const appStore = useAppStore()
// 获取pinia储存中的“菜单”数组
let { width } = storeToRefs(appStore)

const changeAppWidthFn = (value:string)=> {
    appStore.changeWidth(value)
}
</script>